<template>
    <div class="app-edit">
        <el-form ref="form" :model="form" :rules="rules" label-width="150px">
            <el-row :gutter="gutter">
                            <el-col :span="span">
                                <el-form-item label="姓名" prop="name">
                                        <div>{{ form.name }}</div>
                                </el-form-item>
                            </el-col>
                            <el-col :span="span">
                                <el-form-item label="性别" prop="xb">
                                        <dict-tag :options="dict.type.sys_user_sex" :value="form.xb"/>
                                </el-form-item>
                            </el-col>
                            <el-col :span="span">
                                <el-form-item label="下拉选择" prop="xlx">
                                        <dict-tag :options="dict.type.sys_yes_no" :value="form.xlx"/>
                                </el-form-item>
                            </el-col>
                            <el-col :span="span">
                                <el-form-item label="平铺选" prop="pbx">
                                        <dict-tag :options="dict.type.sys_show_hide" :value="form.pbx"/>
                                </el-form-item>
                            </el-col>
                            <el-col :span="span">
                                <el-form-item label="文件上传" prop="fileId">
                                        <div>{{ form.fileId }}</div>
                                </el-form-item>
                            </el-col>
                            <el-col :span="span">
                                <el-form-item label="图片上传" prop="picId">
                                        <div>{{ form.picId }}</div>
                                </el-form-item>
                            </el-col>
                            <el-col :span="span">
                                <el-form-item label="日期" prop="accTime">
                                        <div>{{ form.accTime }}</div>
                                </el-form-item>
                            </el-col>
                            <el-col :span="span">
                                <el-form-item label="备注" prop="memo">
                                        <div>{{ form.memo }}</div>
                                </el-form-item>
                            </el-col>
            </el-row>

        </el-form>
        <div slot="footer" class="dialog-footer" style="text-align:center;">
            <el-button type="primary" @click="cancel">确 定</el-button>
        </div>
    </div>
</template>

<script>
    import {
        listTestDemo,
        getTestDemo,
        delTestDemo,
        addTestDemo,
        updateTestDemo } from "@/api/test/testDemo";

    export default {
        name: "TestDemoEle",
            dicts: ['sys_yes_no', 'sys_user_sex', 'sys_show_hide'],
        props: {
            id: {
                type: String,
                default: ""
            },
            // 弹出层标题
            title:{
                type:String,
                default:undefined
            },
            // 是否显示弹出层
            open: {
                type: Boolean,
                default: false,
            },
        },
        data() {
            return {
                gutter: 120,
                span: 15,
                // 遮罩层
                loading: true,
                // 选中数组
                ids: [],
                // 非单个禁用
                single: true,
                // 非多个禁用
                multiple: true,
                // 显示搜索条件
                showSearch: true,
                // 总条数
                total: 0,
                // demo测试表格数据
                    testDemoList: [],
                // 查询参数
                queryParams: {
                    pageNum: 1,
                    pageSize: 10,
                    name: null,
                    xb: null,
                    xlx: null,
                    pbx: null,
                    fileId: null,
                    picId: null,
                    accTime: null,
                    memo: null,
        },
            // 表单参数
            form: {},
            // 表单校验
            rules: {
            }
        };
        },
        created() {},
        watch: {
            open: {
                handler(val) {
                    if (val) {
                        if(this.id){
                            this.handleInit();
                        }
                    } else {
                        this.reset();
                    }
                },
                immediate: true,
                deep: true,
            },
        },
        methods: {
            /** 查询demo测试列表 */
            // 取消按钮
            cancel() {
                this.$emit("cancel")
            },
            // 表单重置
            reset() {
                this.form = {
                id: null,
                name: null,
                xb: null,
                xlx: "0",
                pbx: [],
                fileId: null,
                picId: null,
                accTime: null,
                memo: null,
                createBy: null,
                createTime: null,
                updateBy: null,
                updateTime: null
            };
                this.resetForm("form");
            },
            /** 搜索按钮操作 */
            handleQuery() {
                this.queryParams.pageNum = 1;
                this.getList();
            },
            // 多选框选中数据
            handleSelectionChange(selection) {
                this.ids = selection.map(item => item.id)
                this.single = selection.length!==1
                this.multiple = !selection.length
            },
            /** 修改按钮操作 */
            handleInit() {
                getTestDemo(this.id).then(response => {
                    this.form = response.data;
                    this.form.pbx = this.form.pbx.split(",");
                    this.open = true;
                    // this.title = "修改demo测试";
                });
            },
            /** 删除按钮操作 */
            handleDelete(row) {
                const ids = row.id || this.ids;
                this.$modal.confirm('是否确认删除demo测试编号为"' + ids + '"的数据项？').then(function() {
                    return delTestDemo(ids);
                }).then(() => {
                    this.getList();
                    this.$modal.msgSuccess("删除成功");
                }).catch(() => {});
            },

        }
    };
</script>
<style lang="scss" scoped>
</style>